import { reactControl, BaseReactElementControl } from "pao-aop-client";
import React from "react";
import { addon } from "pao-aop";

// 样式
import './index.less';
import { Form, Row, Col } from "antd";
import { NTInput } from "src/business/components/input";
import { ValidationRule } from "antd/lib/form";
import { WrappedFormUtils } from "antd/lib/form/Form";
import { NTButton } from "src/business/components/button";
import { FileUploadBtn } from "src/business/components/file-operation-btn/file-upload-btn";
import { NTSelect } from "src/business/components/select";
import { EditBaseFrame } from "src/business/style-components/edit-base-form";
// import { NTOperationTable } from "src/business/components/operation-table";

const formItemLayout = {
    labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 },
    },
};

const render_jsx = {
    /**
     * 上传组件
     */
    upload: (option: any) => <FileUploadBtn list_type={"picture-card"} contents={"plus"} {...option} />,
    /**
     * 输入框组件
     */
    input: (option: any) => <NTInput radius='inputDefault' {...option} />,
    /**
     * 内容不可编辑的输入框组件
     */
    input_uneditable: (option: any) => <NTInput disabled={true} radius='inputDefault' {...option} />,
    /**
     * select组件
     */
    select: (option: any) => <NTSelect {...option} />,
};

/**
 * @param upload 上传组件
 * @param input 输入框组件
 * @param select 内容不可编辑的输入框组件
 * @param input_uneditable select组件
 * @param customProperties 自定义类目组件
 */
export enum InputType {
    "upload",
    "input",
    "select",
    "input_uneditable",
}

/**
 * 组件：“标识模板”状态
 */
export class EditCategoryState {
}

/**
 * 组件：标识模板
 * 描述 标识模板控件
 */
export class EditCategory extends React.Component<EditCategoryControl, EditCategoryState> {
    /**
     * 提交按钮回调
     */
    private handleSubmit = (e: any, submit_props?: any) => {
        e.preventDefault();
        let { form } = this.props;

        form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
                submit_props ? submit_props.cb(err, values) : null;
            }
        });
    }

    /**
     * 其他按钮回调
     */
    private handleOthreBtnClick = (e: any, other_btn_propps_cb?: Function) => {
        e.preventDefault();
        other_btn_propps_cb ? other_btn_propps_cb() : null;
    }

    render() {
        let { form_items_props, col_num, submit_btn_propps, children, other_btn_propps } = this.props;
        const { getFieldDecorator } = this.props.form!;
        let split_span_num = 24 / col_num;
        return (
            <Form {...formItemLayout} onSubmit={(event) => this.handleSubmit(event, submit_btn_propps)}>
                {
                    form_items_props && form_items_props.length > 0 ?
                        form_items_props.map((e, i) =>
                            (
                                <EditBaseFrame title={e.title} key={i}>
                                    <Row >
                                        {
                                            e ? e.input_props.map((input_props, i) =>
                                                <Col span={split_span_num} key={i} >
                                                    <Form.Item
                                                        label={input_props.label}
                                                    >
                                                        {getFieldDecorator(input_props.decorator_id!, {
                                                            initialValue: input_props.default_value,
                                                        })(
                                                            render_jsx[InputType[input_props.type]](input_props.option)
                                                        )}
                                                    </Form.Item>
                                                </Col>
                                            ) : null
                                        }
                                    </Row>
                                </EditBaseFrame>
                            )
                        )
                        : null
                }
                {
                    children
                }
                {
                    submit_btn_propps ?
                        <NTButton name={submit_btn_propps.text} htmlType={"submit"} />
                        : null
                }
                {
                    other_btn_propps ?
                        other_btn_propps.map((other_btn, i) =>
                            <NTButton key={i} name={other_btn.text} onClick={(event: any) => this.handleOthreBtnClick(event, other_btn!.cb)} />
                        )
                        : null
                }
            </Form>
        );
    }
}

/**
 * 控件：“标识模板”控制器
 * 描述 标识模板控制器
 */
@addon('EditCategory', '标识模板', '标识模板结构')
@reactControl(Form.create<EditCategoryControl>()(EditCategory))
export class EditCategoryControl extends BaseReactElementControl {
    /**
     * 表单
     * @description 由Form组件定义，无须赋值，组件可以直接访问，但组件必须通过Form.create()方法定义
     */
    form: WrappedFormUtils;

    /**
     * 每行的表单项数量（暂时不完美）
     */
    col_num: number;

    /**
     * 表单基本属性数组
     */
    form_items_props: {
        /**
         * 卡片标题
         */
        title: string;

        /**
         * 卡片内的输入框基本属性
         */
        input_props: {
            /**
             * 表单组项件类型
             */
            type: InputType;
            /**
             * 表单项组件标签
             */
            label?: string;
            /**
             * 表单默项认值（getFieldDecorator的initialValue）
             */
            default_value?: any;
            /**
             * 表单项修饰id（getFieldDecorator的id）
             */
            decorator_id: string;
            /**
             * 表单项校验规则（getFieldDecorator的rules）
             */
            rules?: ValidationRule[];
            /**
             * 表单所用组件的基本属性
             */
            option?: any;
        }[];
    }[];

    /**
     * 该表单提交按钮属性
     */
    submit_btn_propps?: {
        /**
         * 提交按钮文本
         */
        text: string;
        /**
         * 提交按钮回调
         */
        cb: Function
    };

    /**
     * 其他按钮属性（与提交按钮并列）
     */
    other_btn_propps?: {
        /**
         * 按钮文本
         */
        text: string;
        /**
         * 按钮回调
         */
        cb?: Function
    }[];

    constructor() {
        super();
    }
}
export default Form.create<EditCategoryControl>()(EditCategory);
